<template>
  <div class="box">
    <my-address></my-address>
    <my-search></my-search>

    <!-- 在这里 我们可以直接使用微信小程序的自带组件 -->
    <swiper class='swiper_box' :indicator-dots="true" :autoplay="true" :interval="2000" :duration="200" :circular='true'>
      <block v-for="(item,index) in banner" :key="index">
        <swiper-item>
          <view class="swiper-item ">
            <img :src="item" alt="">
          </view>
        </swiper-item>
      </block>
    </swiper>

    <!-- 广告图 -->
    <div class="adBox">
      <img src="https://j-image.missfresh.cn/img_20190311114444266.png" alt="">
    </div>

    <!-- 优势说明 -->
    <ul class="tabRowBox">
      <li>
        <van-icon name="logistics" /> 最快30分到达
      </li>
      <li>
        <van-icon name="fire-o" /> 全球产地直采
      </li>
      <li>
        <van-icon name="after-sale" /> 天天平价
      </li>
    </ul>

    <!-- 十宫格 -->
    <van-grid :gutter="10">
      <van-grid-item use-slot v-for="(item,index) in tabAry" :key='index'>
        <navigator :navigateTo="item.url" class='tabItem'>
          <img :src="item.img" alt="">
          <div>{{item.text}}</div>
        </navigator>
      </van-grid-item>
    </van-grid>

    <!-- 横向导航栏 -->
    <van-tabs :active="active" @change='changeTab'>
      <van-tab title="全部" name='all'></van-tab>
      <van-tab title="年货节" name='year'></van-tab>
      <van-tab title="在家火锅" name='home'></van-tab>
      <van-tab title="早餐" name='default'></van-tab>
      <van-tab title="一件包邮" name='one'></van-tab>
      <van-tab title="快手菜" name='quick'></van-tab>
      <van-tab title="会员精选" name='vip'></van-tab>
    </van-tabs>

    <div class="van_content">
      <goods :data='listAry'></goods>
    </div>
  </div>
</template>

<script>
import card from "@/components/card";
import address from "@/components/address";
import search from "@/components/search";
import http from '@/utils/http.js'
import goods from './goods'

export default {
  data() {
    return {
      banner: [
        "https://j-image.missfresh.cn/img_20190528192621669.jpg",
        "https://j-image.missfresh.cn/img_20190524230020655.jpg",
        "https://j-image.missfresh.cn/img_20190522223030516.jpg",
        "https://j-image.missfresh.cn/img_20190523222548600.png"
      ],
      tabAry: [
        {
          url: "",
          text: "新鲜水果",
          img: "https://j-image.missfresh.cn/img_20190523222548600.png"
        },
        {
          url: "",
          text: "新鲜水果",
          img: "https://j-image.missfresh.cn/img_20190523222548600.png"
        },
        {
          url: "",
          text: "新鲜水果",
          img: "https://j-image.missfresh.cn/img_20190523222548600.png"
        },
        {
          url: "",
          text: "新鲜水果",
          img: "https://j-image.missfresh.cn/img_20190523222548600.png"
        },
        {
          url: "",
          text: "新鲜水果",
          img: "https://j-image.missfresh.cn/img_20190523222548600.png"
        },
        {
          url: "",
          text: "新鲜水果",
          img: "https://j-image.missfresh.cn/img_20190523222548600.png"
        },
        {
          url: "",
          text: "新鲜水果",
          img: "https://j-image.missfresh.cn/img_20190523222548600.png"
        },
        {
          url: "",
          text: "新鲜水果",
          img: "https://j-image.missfresh.cn/img_20190523222548600.png"
        }
      ],
      active:'all',
      listAry:[]
    };
  },

  components: {
    card,
    goods,
    "my-address": address,
    "my-search": search
  },
  
  methods: {
    clickHandle(ev) {
      console.log("clickHandle:", ev);
      // throw {message: 'custom test'}
    },
    fn(item, e) {
      console.log(item, e);
    },
    changeTab(e){
      this.active = e.mp.detail.name;
      http.get('/homeList',{type:this.active}).then(data=>{
        this.listAry = data.data;
      })
    },
    getGoods(){
      http.get('/homeList',{type:this.active}).then(data=>{
        this.listAry = data.data;
      })
    }
  },
  created() {
    let app = getApp()
    this.getGoods();
  }
};
</script>

<style lang='less'>
.box {
  .swiper_box {
    width: 95%;
    margin: 10px auto;
    overflow: hidden;
    border-radius: 10px;
    .swiper-item {
      img {
        width: 100%;
      }
    }
  }
  .adBox,
  .tabRowBox {
    width: 95%;
    margin: 10px auto;
    overflow: hidden;
    img {
      width: 100%;
      height: 135px;
    }
  }
  .tabRowBox {
    display: flex;
    align-items: center;
    font-size: 12px;
    li {
      flex: 1;
      text-align: center;
    }
  }
  .tabItem {
    width: 100%;
    text-align: center;
    img {
      width: 90rpx;
      height: 100rpx;
      border-radius: 50%;
      overflow: hidden;
    }
  }
}
</style>
